<template>
	<view class="storeBox">
		<view>
			<view class="topMenu">
				<view style='display: flex;'>
					<view class="tit-txt" :class="{ active: tabType == 'order' }" @click="tabType = 'order'">
						<view class="">订单</view>
						<view class="hr"></view>
					</view>
					<view class="tit-txt" :class="{ active: tabType == 'data' }" @click="tabType = 'data'">
						<view class="">数据</view>
						<view class="hr"></view>
					</view>
					<view class="tit-txt" :class="{ active: tabType == 'control' }" @click="tabType = 'control'">
						<view class="">管理</view>
						<view class="hr"></view>
					</view>
				</view>
				<view class='text-box' v-show="tabType == 'order'">
					<text style='margin-right: 28rpx;'>{{ orderList.length }}份</text>
					<text>{{ today }}</text>
				</view>
			</view>

			<!-- 订单 -->
			<view v-show="tabType == 'order'">
				<view style='padding: 10px;background-color: #fff;'>
					<u-search placeholder="输入序号、姓名、菜品进行搜索" v-model="keyword" @search='clickSearch'
						@custom='clickSearch'></u-search>
				</view>
				<view class="tableBox" v-if="orderList.length">
					<view class="table" :style="{ width: trWidthTotal + 'rpx' }">
						<view class="tr">
							<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }">序号</view>
							<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">姓名</view>
							<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">菜品</view>
							<view class="td" :style="{ width: trWidthArr[3] + 'rpx' }">提交时间</view>
						</view>
						<view class="tr" v-for="(item, index) in orderList" :key="item.number">
							<view class="td" :style="{ width: trWidthArr[0] + 'rpx' }">{{ item.pickingSerialNo }}</view>
							<view class="td" :style="{ width: trWidthArr[1] + 'rpx' }">{{ item.username }}</view>
							<view class="td" :style="{ width: trWidthArr[2] + 'rpx' }">{{ item.foodsName }}</view>
							<view class="td" :style="{ width: trWidthArr[3] + 'rpx' }">{{ item.submissionTime }}</view>
						</view>
					</view>
				</view>
				<view class='empty-box' v-else>
					<u-empty text="暂无订单数据" mode="page"></u-empty>
				</view>

			</view>

			<!-- 数据 -->
			<view v-show="tabType == 'data'" class='tab-data'>
				<view style='padding: 10px;background-color: #fff;' class='search-box'>
					<!-- <view>日期:</view> -->
					<view class='time t1' @click='clickTimeVal("timeBegin")'>{{ timeBegin }}</view>
					<view class='time t2' @click='clickTimeVal("timeEnd")'>{{ timeEnd }}</view>
					<u-button type="primary" shape="square" size="medium" class='btn'
						@click='getCompanyDetailListFun'>查询</u-button>
					<u-button type="primary" shape="square" size="medium" class='btn'
						@click='clickMultiDownload'>下载</u-button>
				</view>
				<u-picker mode="time" v-model="showTime" :default-time='pickerTimeDefault'
					@confirm='confirmTimeFun'></u-picker>
				<view class="tableBox" v-if="summaryOrderList.length">
					<view class="table" style="max-width: 500px;">
						<view class="tr">
							<view class="td" style="flex-grow: 6">日期</view>
							<view class="td" style="flex-grow: 1">份数</view>
							<view class="td" style="flex-grow: 1">操作</view>
						</view>
						<view class="tr" v-for="(item, index) in summaryOrderList" :key="index">
							<view class="td" style="flex-grow: 6">{{ item.menuDisplayTime }}</view>
							<view class="td" style="flex-grow: 1">{{ item.orderCount }}份</view>
							<view class="td download-btn" style="flex-grow: 1" @click='downLoadFoodListByDay(item)'>下载
							</view>
						</view>
					</view>
				</view>
				<view class='empty-box' v-else>
					<u-empty text="暂无订单数据" mode="page"></u-empty>
				</view>

			</view>

			<u-toast ref="uToast"></u-toast>

		</view>

	</view>
</template>

<script>
import {
	getOrderByCompanyId,
	getCompanyDetailList,
	companyFoodOrderExportXls,
	multiCustomExportXls,
} from '@/utils/req/api.js';
import {
	mapActions,
	mapState,
	mapGetters,
	mapMutations
} from 'vuex';
import {
	formatDate
} from '@/utils/commen.js'
export default {
	components: {

	},
	data() {
		return {
			companyId: 'da498e',
			keyword: '',
			tabType: 'order',
			trWidthArr: [],
			allOrderList: [], // 所有数据
			orderList: [], // 搜索结果数据
			today: formatDate(new Date(), 'MM-dd'),

			monthStart: '',		// 本月第一天
			monthEnd: '',		// 本月最后一天
			showTime: false,
			currentTimeType: '',
			pickerTimeDefault: '',
			timeBegin: '',
			timeEnd: '',
			summaryOrderList: [],
			fieldList: [
				{ username: "姓名" },
				{ pickupAddress: "取餐地址" },
				{ merchantName: "商户名称" },
				{ foodsName: "菜品" },
				{ cost: "金额" },
				{ remark: "备注" },
				{ department: "部门" },
				{ submissionTime: "提交时间" },
			]
		};
	},
	onLoad({ id }) {
		console.log('id',id);
		if (id) {
			this.companyId = id;
			uni.setStorageSync('companyId', id)
		} else {
			this.companyId = uni.getStorageSync('companyId');
		}
	},
	onShow() {
		this.setMonthDate();
		this.getOrderList();
		this.getCompanyDetailListFun();
	},
	methods: {
		// 获取订单列表
		async getOrderList(val) {
			let res = await getOrderByCompanyId({
				companyId: this.companyId,
			})

			let data = [];
			if (res.data.code == 200) {
				data = res.data.result || [];
			}
			this.allOrderList.push(...data)
			this.clickSearch();
		},

		// 点击查询
		clickSearch(keyword = '') {
			if (keyword === '' || keyword == null) {
				this.orderList = [...this.allOrderList]
			} else {
				let list = [];
				this.allOrderList.forEach(item => {
					if ((item.pickingSerialNo + '').includes(keyword) || item.username.includes(keyword) || item.foodsName
						.includes(keyword)) {
						list.push(item);
					}
				})
				this.orderList = list;
			}
			this.handleOrderList();
		},
		// 处理订单表格数据
		handleOrderList(data) {
			this.trWidthArr = [2, 2, 2, 2];
			this.orderList.forEach(item => {
				if (item.pickingSerialNo && item.pickingSerialNo.length > this.trWidthArr[0]) {
					this.trWidthArr[0] = item.pickingSerialNo.length;
				}
				if (item.username && item.username.length > this.trWidthArr[1]) {
					this.trWidthArr[1] = item.username.length;
				}
				if (item.foodsName && item.foodsName.length > this.trWidthArr[2]) {
					this.trWidthArr[2] = item.foodsName.length;
				}
				if (item.submissionTime.length > this.trWidthArr[3]) {
					this.trWidthArr[3] = item.submissionTime.length;
				}

			})

			let trWidthTotal = 0;
			console.log(this.trWidthArr)
			this.trWidthArr.forEach((item, index) => {
				let fixedLen = item * 28 + 50;
				if (index == 3) {
					fixedLen = item * 18 + 10;
				}
				this.$set(this.trWidthArr, index, fixedLen);
				trWidthTotal = trWidthTotal + fixedLen + 20;
			});
			this.trWidthTotal = trWidthTotal + 0;
		},
		// 设置日期数据
		setMonthDate() {
			let now = new Date();
			let year = now.getFullYear()
			let month = now.getMonth();
			this.monthStart = formatDate(new Date(year, month, 1), 'yyyy-MM-dd')
			this.monthEnd = formatDate(new Date(year, month + 1, 0), 'yyyy-MM-dd')

			this.timeBegin = this.monthStart
			this.timeEnd = this.monthEnd
		},

		// 企业行政菜品历史订单汇总
		async getCompanyDetailListFun() {
			let param = {
				timeBegin: this.timeBegin,
				timeEnd: this.timeEnd,
				// timeBegin: '2024-1-1',
				// timeEnd: '2024-1-8',
				companyId: this.companyId,
				order: 'desc',
				pageNo: 1,
				pageSize: 10000,
			}
			let res = await getCompanyDetailList(param);
			console.log(res, '------------');
			if (res.data.code == 200) {
				this.summaryOrderList.length = 0;
				let list = res.data.result.records || [];
				this.summaryOrderList.push(...list)
				setTimeout(() => {
					console.log(this.summaryOrderList)
				}, 1000)
			}
		},

		// 下载单日订单
		async downLoadFoodListByDay(item) {
			let param = {
				detailId: item.id,
				fieldList: this.fieldList,
			}

			let res = await companyFoodOrderExportXls(param);
			let url = getApp().globalData.BASE_URL + 'sys/common/static/' + res.data.result;
			console.log('下载---', url,)
			let system = navigator.userAgent
			// let isAndroid = system.indexOf('Android') > -1 || system.indexOf('Adr') > -1 // android终端
			let isiOS = !!system.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
			if (isiOS) {
				window.location.href = url;
			} else {
				window.open(url);
			}
		},

		// 唤起时间选择器
		clickTimeVal(type) {
			this.currentTimeType = type;
			this.pickerTimeDefault = this[this.currentTimeType]
			this.showTime = true;
		},
		// 选择好时间
		confirmTimeFun(val) {
			let { year, month, day } = val;
			this[this.currentTimeType] = `${year}-${(month)}-${(day)}`
		},
		// 点击批量下载
		clickMultiDownload(val) {
			let time1 = new Date(this.timeBegin)
			let time2 = new Date(this.timeEnd)
			let timeBegin = this.timeBegin
			let timeEnd = this.timeEnd
			if (time1 > time2) {
				timeEnd = this.timeBegin
				timeBegin = this.timeEnd
			}

			let param = {
				companyId: this.companyId,
				fieldList: this.fieldList,
				timeEnd,
				timeBegin,
			}

			multiCustomExportXls(param).then(res => {
				if (!res.data.result) {
					this.$showToast.call(this, '没有数据可下载');
					return;
				}
				let url = getApp().globalData.BASE_URL + 'sys/common/static/' + res.data.result;

				let system = navigator.userAgent
				// let isAndroid = system.indexOf('Android') > -1 || system.indexOf('Adr') > -1 // android终端
				let isiOS = !!system.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
				if (isiOS) {
					window.location.href = url;
				} else {
					window.open(url);
				}
			})
		},

	},

	watch: {
		tabType(newVal, oldVal) {
			if (newVal == 'control') {
				uni.navigateTo({
					url: '/pages/company/control'
				})
			}
		}
	}
};
</script>


<style lang="scss" scoped>
$success-color: #70B603;
$red-color: #f32d4a;

.topMenu {
	background-color: #fff;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.tit-txt {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		>view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #f1b825;
			margin: 0 auto;
			margin-top: 10rpx;
			display: none;
		}
	}

	.active {
		color: #000;
		font-size: 46rpx;
		font-weight: bold;
	}

	.text-box {
		color: #8f8b8b;
		font-size: 32rpx;
	}
}

.empty-box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 600rpx;
}


.storeBox {
	// width: 500px;
	padding-bottom: 40rpx;
	height: 100vh;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;

	&>view {
		height: 100%;
		width: 100%;
	}
}

.tableBox {
	overflow: hidden;
	overflow-x: scroll;
	background-color: #fff;
	// padding: 20rpx 0;
}

.table {
	background-color: #fff;
	// padding: 20rpx;
	display: flex;
	flex-direction: column;

	scroll-view {
		width: 1000px !important;
	}

	.download-btn {
		color: #399cf3;
	}

	.tr {
		display: flex;
		border: 1px solid #eee;
		border-bottom: 0;
		color: #000;
		max-height: 150rpx;

		&.multipleOrders {
			// color: #f79c9c;
		}

		&:nth-child(1) {
			background-color: #eee;
			border: 0;

			.td {
				color: #000;
			}
		}

		&:last-child {
			border-bottom: 1px solid #ccc;
		}

		.td {
			padding: 10rpx;
			font-size: 28rpx;
			width: 100rpx;
			text-align: center;
			flex-shrink: 0;
			line-height: 1.5;

			&:first-child {
				width: 50rpx;
			}

			&:last-child {
				// width: 360rpx
			}

			&:nth-child(5) {
				text-align: left;
			}

			.error {
				color: red;
				font-weight: bold;
				font-size: 32rpx;
			}

			&:last-child {
				width: 200rpx;
			}

			&.sort-col {
				font-weight: bold;
			}

			&.isSort {
				color: red;
			}
		}

	}
}

.orderList {
	@include flexs(flex-start, flex-start);
	font-size: 28rpx;
	line-height: 2;
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 40rpx;

	uni-checkbox {
		margin-right: 10rpx;
	}

	>view {
		@include flexs(flex-start, flex-start);
		flex-direction: column;
		width: 100%;
		flex-wrap: wrap;

		>view {
			width: 100%;
			@include flexs();
			flex-wrap: wrap;
			// color: rgba(0, 0, 0, 0.55);
			color: #000;

			text {
				color: #000;
				margin: 0 20rpx;
			}
		}

		>.foods {
			@include flexs(flex-start, flex-start);
			line-height: 1.5;

			>.det {
				flex: 1;
				margin-left: 20rpx;

				text {
					margin-left: 0;
					margin-right: 4rpx;
					line-height: 1.5;
				}

				.error {
					color: red;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}

		>.w30 {
			>view {
				width: calc(100% / 3);
			}
		}

		>.w10 {
			@include flexs(flex-start, flex-start);

			>view:nth-child(2) {
				@include flexs();
				flex-wrap: wrap;

				>view {
					width: 50%;
					color: #000;
					padding-left: 10rpx;
				}
			}
		}

		>.w50 {
			.note {
				font-size: 32rpx;
				line-height: 2;
			}

		}
	}
}

.tab-data {
	.search-box {
		display: flex;
		// justify-content: space-between;
		align-items: center;

		&>view {
			margin-right: 20rpx;
		}

		.time {
			border: 1px solid #bbb;
			height: 60rpx;
			line-height: 58rpx;
			width: 200rpx;
			text-align: center;
			border-radius: 5px;
		}

		.btn {
			height: 60rpx !important;
			line-height: 60rpx !important;
			padding: 0 30rpx;
			margin: 0px;

			&+.btn {
				margin-left: 20rpx;
			}
		}
	}
}
</style>
